<!-- 试复样明细 -->
<template>
    <div class="my-tool-bar" style="padding:0px 10px 10px 0px;box-sizing: border-box;">
        <Toolbar :items="['查询', '新增']" @select="selectHandler" @add="addHandler" />
    </div>
    <div style="padding: 10px; box-sizing: border-box;height:100%">
          <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" rowSelection="multiple" @grid-ready="gridReady" style="height:85%" class='ag-theme-alpine'
            :defaultColDef="defaultColDef" :rowData="table.dataList" :columnDefs="cfsValue" :localeText="localeTextData" />
        <paginationCopys :total="total" show-total show-jumper show-page-size @change="changePage"
            @page-size-change="changeSize" style="justify-content: center;margin-top: 10px;"
            :page-size="pagination.pageSize" :current="pagination.page" />
    </div>
    <a-drawer :drawer-style="{ zIndex: 9999 }" height="100%" unmountOnClose :visible="pageData.showAdd"
        :mask-closable="false" placement="bottom" @cancel="pageData.showAdd = false">
        <template #title>
            {{ pageData.sideTitle }}
        </template>
        <!-- 明细新增编辑 --> 
        <!-- <dup-s-sample-deatail   ref="dupDetail" :dataForm="dataForm"/>  0-->
        <DupSampleDeatail :pageData="pageData" @search-handler="searchHandler" @select-await="selectAwait" ref="dupDetail" :dataForm="dataForm" />
        <template #footer>
            <a-button size="mini" @click="pageData.showAdd = false">
                关闭
            </a-button>
            <a-button type="primary" size="mini" @click="saveHandler">
                保存
            </a-button>
        </template>
    </a-drawer>
</template>
<script lang="ts">
import { dupDetail, dupSchedule, dupType } from '@/api/laboratory';
import { Message } from '@arco-design/web-vue';
import { onMounted, reactive, ref, unref } from 'vue';

import { localeText } from '@/api/aggridZw'
import emitter from '@/hooks/useEventBus'
import { usePagination, useTable, useRowKey } from '@/hooks/table';
import DupSampleDeatail from './DupSampleDeatail.vue';
import { orderFn } from '@/api/laboratory/other';
export default {
    name: 'testDupDetail',
    components: {  DupSampleDeatail },
    setup() {
        onMounted(() => {
            // 第一个页面需要在刚进入就调用一次  切换tap时也需要调用
            doRefresh();
            emitter.on("refresh-testDupDetail", () => {
                doRefresh();
                // gridOption.value.sizeColumnsToFit();
            });
        });
        const selectHandler = () => {
            doRefresh();
        };
        //下拉数据
        const options = ref<any>();
        const loading = ref(false);
        const searchHandler = async (value: any, index: number) => {
            if (value) {
                loading.value = true;
                await selectAwait(index, value, (data: any) => {
                    options.value = data;
                });

                loading.value = false;
            } else {
                options.value = [];
            }
        };
        const selectAwait = async (selectIndex: number, value: any = '', cb = (data: any) => { return data }) => {
            switch (selectIndex) {
                case 1:
                    //获取流转卡号下拉列表信息数据
                    await orderFn().getCirculCardList({ flowCardCode: value, }).then(res => {
                        if (res.code === 200) {
                            // console.log(res.data);
                            pageData.circulDropList = res.data;
                            cb(res.data);
                        } else {
                            Message.error({
                                content: "查询失败！",
                                duration: 5000,
                            });
                        }
                    });
                    break;
                case 2:
                    //获取人员下拉列表信息数据
                    await orderFn().getHrhrEmployeeList({ name: value }).then(res => {
                        if (res.code === 200) {
                            pageData.employeeList = res.data;
                            cb(res.data);
                        } else {
                            Message.error({
                                content: "查询失败！",
                                duration: 5000,
                            });
                        }
                    });
                    break;
                case 3:
                    //获取复样类型下拉列表信息数据
                    await dupType().getFieldDupTypeList({ duplicateType: value }).then(res => {
                        if (res.code === 200) {
                            pageData.sampleTypeList = res.data;
                            cb(res.data);
                        } else {
                            Message.error({
                                content: "查询失败！",
                                duration: 5000,
                            });
                        }
                    });
                    break;
                case 4:
                    //获取进度类型下拉列表信息数据
                    await dupSchedule().getFieldDupSchedList({ scheduleType: value }).then(res => {
                        if (res.code === 200) {
                            pageData.dupScheduleList = res.data;
                            cb(res.data);
                        } else {
                            Message.error({
                                content: "查询失败！",
                                duration: 5000,
                            });
                        }
                    });
                    break;
            }
        }
        const addHandler = () => {
            pageData.showAdd = true;
            dataForm.value = {};
            pageData.sideTitle = '新增明细列表';
        };

        const dataForm = ref({});
        const pageData = reactive<{
            showAdd: boolean,
            sideTitle: string,
            pageLoading: boolean,
            circulDropList: any[], //流转卡列表
            employeeList: any[],// 人员列表
            sampleTypeList: any[], //复样类型
            dupScheduleList:any[], //进度类型
        }>({
            showAdd: false,
            sideTitle: '',
            pageLoading: false,
            circulDropList: [],
            employeeList: [],
            sampleTypeList: [],
            dupScheduleList:[]
        })
        const doRefresh = async () => {
            pageData.pageLoading = true;
            await dupDetail().getPageDupDetailList({
                page: pagination.page,
                size: pagination.pageSize,
                deleteState: 0
            }).then(({ code, data }: any) => {
                if (code === 200) {
                    table.handleSuccess(data.list);
                    gridOption.value.setRowData(data.list);
                    total.value = data.total;
                }
            }).catch(console.log).finally(() => {
                pageData.pageLoading = false
            });
        };
        const editHandler = (record: any) => {
            pageData.showAdd = true;
            pageData.sideTitle = '编辑明细列表';
            for (var key in record) {
                dataForm.value[key] = record[key]
            };
        };

        const saveHandler = () => {
            emitter.emit('saveHandler', async (status: boolean, dataForm: any) => {
                if (status) {
                    if (status) {
                        let res: any = null;
                        if (!dataForm.id) {
                            res = await dupDetail().addDupDetail([{ ...dataForm }]);
                        } else {
                            res = await dupDetail().editDupDetail([{ ...dataForm }]);
                        }
                        if (res.code === 200) {
                            pageData.showAdd = false;
                            Message.success('操作成功');
                            doRefresh();
                        } else {
                            Message.error(res.message);
                        }
                    }
                }
            })

        }


        //明细列表
        const gridOption = ref();
        const gridReady = (params: any) => {
            gridOption.value = params.api;
            //调整表格自适应大小
            // gridOption.value.sizeColumnsToFit(); 
        };
        const defaultColDef = {
            sortable: true,
            resizable: true,
            filter: true,
            // flex: 1,
            width: 150,
        }
        const cfsValue = [
            {
                headerName: '进度日期',
                field: 'columnDate',
                width: 170,
            },
            {
                headerName: '计划单号',
                field: 'planAdd',
                width: 150,
            },
            {
                headerName: '流转卡号',
                field: 'roamCard',
                width: 150,
            },
            {
                headerName: '生产车间',
                field: 'worksho',
                width: 150,
            },
            {
                headerName: '进度类型',
                field: 'speedType',
                width: 150,
            },
            {
                headerName: '客户名称',
                field: 'customerName',
                width: 150,
            },
            {
                headerName: '暂放时间（小时）',
                field: 'temporarys',
                width: 150,
            },
            {
                headerName: '色号',
                field: 'colourNumber',
                width: 150,
            },
            {
                headerName: '确认色',
                field: 'colorConfirmation',
                width: 150,
            },
            {
                headerName: '布号',
                field: 'clothNumber',
                width: 150,
            },
            {
                headerName: '品名',
                field: 'tradeName',
                width: 150,
            },
            {
                headerName: '纱支',
                field: 'yarnCount',
                width: 150,
            },
            {
                headerName: '纱批',
                field: 'yarnNumber',
                width: 150,
            },
            {
                headerName: '坯布编号',
                field: 'grayCode',
                width: 150,
            }, {
                headerName: '坯布姓名',
                field: 'grayName',
                width: 150,
            },
            {
                headerName: '对色资料',
                field: 'coloringMatch',
                width: 150,
            },
            {
                headerName: '复样加急',
                field: 'duplicateSample',
                width: 150,
            },
            {
                headerName: '工艺类型',
                field: 'craftType',
                width: 150,
            },
            {
                headerName: '是否加急',
                field: 'urgent',
                width: 150,
            },
            {
                headerName: '复样说明',
                field: 'duplicateExplain',
                width: 150,
            },
            {
                headerName: '复样类型',
                field: 'checkerType',
                width: 150,
            },
            {
                headerName: '复样员',
                field: 'checker',
                width: 150,
            },
            {
                headerName: '复办中时间',
                field: 'handleIn',
                width: 150,
            },
            {
                headerName: '复办OK时间',
                field: 'handleOk',
                width: 150,
            },
            {
                headerName: '复办时间',
                field: 'handleDate',
                width: 150,
            },
            {
                headerName: '复办原因',
                field: 'handleRemark',
                width: 150,
            },
            {
                headerName: '复T中时间',
                field: 'repeatedTIn',
                width: 150,
            },
            {
                headerName: '复TOK时间',
                field: 'repeatedTOk',
                width: 150,
            },
            {
                headerName: '复T时间',
                field: 'repeatedTDate',
                width: 150,
            },
            {
                headerName: '复T原因',
                field: 'repeatedTRemark',
                width: 150,
            },
            {
                headerName: '套绵中时间',
                field: 'harnessIn',
                width: 150,
            },
            {
                headerName: '套绵OK时间',
                field: 'harnessOk',
                width: 150,
            },
            {
                headerName: '套绵时间',
                field: 'harnessDate',
                width: 150,
            },
            {
                headerName: '套绵原因',
                field: 'harnessRemark',
                width: 150,
            },
            {
                headerName: '加色中时间',
                field: 'colourIn',
                width: 150,
            },
            {
                headerName: '加色OK时间',
                field: 'colourOk',
                width: 150,
            },
            {
                headerName: '加色时间',
                field: 'colourDate',
                width: 150,
            },
            {
                headerName: '加色原因',
                field: 'colourRemark',
                width: 150,
            },
            {
                headerName: '放样中时间',
                field: 'releaseIn',
                width: 150,
            },
            {
                headerName: '放样OK时间',
                field: 'releaseOk',
                width: 150,
            },
            {
                headerName: '放样时间',
                field: 'releaseDate',
                width: 150,
            },
            {
                headerName: '放样原因',
                field: 'releaseRemark',
                width: 150,
            },
            {
                headerName: '备注',
                field: 'remark',
                width: 150,
            },
            {
                headerName: '建立人',
                field: 'createName',
                width: 150,
            },
            {
                headerName: '建立时间',
                field: 'createTime',
                width: 170,
            },
            {
                headerName: '修改人',
                field: 'updateName',
                width: 150,
            },
            {
                headerName: '修改时间',
                field: 'updateTime',
                width: 170,
            },
            {
                headerName: '操作',
                field: 'action',
                resizable: false,
                filter: false,
                sortable: false,
                lockPosition: 'right',
                width: '100',
                pinned: 'right',
                cellRenderer: {
                    template: `<a-tag color="#ff7d00" @click="a" class="gesture">修改</a-tag>`,
                    setup(props: any) {
                        const a = () => {
                            editHandler(props.params.data)
                        }
                        return {
                            a
                        }
                    }
                },
            },
        ];
        const total = ref(10);
        const changePage = (val: any) => {
            pagination.page = val
            doRefresh();
        }
        const changeSize = (val: any) => {
            pagination.pageSize = val
            doRefresh();
        }
        const pagination = usePagination(doRefresh);
        const localeTextData: any = ref(localeText);
        const table = useTable();
        const rowKey = useRowKey("id");
        return {
            doRefresh,
            pageData,
            cfsValue,
            selectHandler,
            dataForm,
            gridOption,
            gridReady,
            defaultColDef,
            pagination,
            localeTextData,
            table,
            rowKey,
            total,
            changePage,
            changeSize,
            addHandler,
            saveHandler,
            searchHandler,
            selectAwait,
            options,
            loading,
        }
    },
}
</script>
<style lang="scss" scoped></style>